<template>
  <div class="text-center">
    <Motions>
      <h2 class="title">密码登录</h2>
    </Motions>
  </div>
  <a-form :model="formState" @finish="() => onShow()" @keydown.enter="onShow">
    <Motions :delay="100">
      <a-form-item name="mobile" :rules="[
        { required: true, message: '请输入手机号' },
        { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' },
      ]">
        <a-input v-model:value="formState.mobile" placeholder="手机号" size="large" :maxlength="11">
          <template #prefix>
            <TabletOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input>
      </a-form-item>
    </Motions>
    <Motions :delay="150">
      <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
        <a-input-password autocomplete v-model:value="formState.password" placeholder="密码" size="large" current-password>
          <template #prefix>
            <LockOutlined class="site-form-item-icon" style="color: #747474" />
          </template>
        </a-input-password>
      </a-form-item>
    </Motions>
    <Motions :delay="200">
      <a-form-item>
        <div class="text-end">
          <a-button type="link" primary class="text-base">忘记密码？</a-button>
        </div>
      </a-form-item>
    </Motions>
    <Motions :delay="300">
      <a-form-item>
        <a-button block size="large" type="primary" html-type="submit" class="mt-14">
          登录
        </a-button>
      </a-form-item>
    </Motions>
    <Motions :delay="350">
      <div class="text-center">
        <span class="text-[#999999] text-base">还没有账号吗？</span>
        <a-button type="link" size="large" @click="regist">注册新账号</a-button>
      </div>
    </Motions>
  </a-form>
  <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
</template>

<script setup lang="ts">
import Motions from "./motion.vue";
import { TabletOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useUserStore } from "@/store";
import Vcode from "vue3-puzzle-vcode";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
interface FormState {
  mobile: string;
  password: string;
}

const route = useRoute();
const router = useRouter();
const isShow = ref(false);
// 获取当前的主题色值
const getThemeColor =()=> {
  const rootStyle = getComputedStyle(document.documentElement);
  return rootStyle.getPropertyValue('--theme-color').trim(); // .trim() 去掉空格
}

const formState = reactive<FormState>({
  mobile: "",
  password: "",
});

const userData = ref<any>({
  avatar:getThemeColor(),
  realName:'用户'
});

const onShow = () => {
  isShow.value = true;
};

const onClose = () => {
  isShow.value = false;
};

const onSuccess = async () => {

      localStorage.setItem("token", 'NI_CHOU_SHA');
      localStorage.setItem("mobile",formState.mobile);
      localStorage.setItem("user",JSON.stringify(userData.value))
      message.success("登录成功");
      if (route.query.path) router.push(String(route.query.path));
      else router.push("/");

};

const regist = () => {
  useUserStore().SET_CURRENTPAGE(1);
};
</script>

<style lang="less" scoped>
.title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--theme-color);
  margin-top: 10px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
